<template>
  <div class="setting-container">
    <div class="setting-content">
      <div class="registerInfo">
        <div class="registerInfo-content">
          <el-form :label-position="labelPosition"
                   class="ruleForm"
                   label-width="100px"
                   :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm">
            <div>
              <el-form-item label="新手机号" prop="mobile">
                <el-col :span="20">
                  <el-input v-model="ruleForm.mobile" placeholder="新手机号" ></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-col :span="14">
                  <el-input v-model="ruleForm.code" placeholder="验证码" ></el-input>
                </el-col>
                <el-col :span="10">
                  <el-button class="border-btn" @click="smsClick" :disabled="disable" style="margin-left: 10px">{{codeStr}}</el-button>
                </el-col>
              </el-form-item>
            </div>
          </el-form>
          <div style="float: right;margin-right: 20px;margin-top: 60px">
            <el-button class="border-btn" style="margin-left: 60px" @click="console()">取消</el-button>
            <el-button class="main-btn" type="primary" size="small" @click="submit()">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {sendSms,updateMobile} from "../../../api/common";
  import {getInfo} from "../../../api/user";
  import {IsMobileExist} from "@/api/clinicManagement";
  export default {
    name: "updateMobile",
    data() {
      //手机号校验
      var checkNumber = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入手机号"));
        } else {
          let regEn = /^1[3456789]\d{9}$/
          if (!regEn.test(value)) {
            callback(new Error('请输入正确电话号码'))
          }else if(value==this.mobile){
            callback();
          }else {
            this.disabled = false;
            this.isMobileExist(this.ruleForm.mobile, function (data) {
              if (data.state) {
                callback(new Error("该手机号已存在！"));
              } else {
                callback();
              }
            });
          }
        }
      }
      return {
        timer: null,
        disable:false,
        count: '',
        mobile:'',
        codeStr:'获取验证码',
        activeName: 'first',
        labelPosition: 'right',
        ruleForm: {
          mobile: '',
          code:'',
        },
        disabled:false,
        isUpdateMobile:'',
        rules: {
          mobile: [
            {  required: true,trigger: 'blur',validator:checkNumber}
          ],
          code:[
            {
              required: true,message:'请输入验证码',trigger: 'blur',
            }
          ]
        },
      };
    },
    created() {
    },
    mounted() {
      getInfo().then(res=>{
        if(res.code==200){
          this.mobile = res.data.mobile
          // this.ruleForm.mobile = res.data.mobile
        }
      })

    },
    computed: {},

    methods: {
      //手机验证
      isMobileExist(mobile, callback) {
        let data={
          mobile:mobile
        }
        IsMobileExist(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data)
            this.mobileExist = res.data.is_exits;
            if (this.mobileExist === true) {
              this.ruleForm.mobile = ''
              this.disabled = true
            }
            callback({state: this.mobileExist});
          }
        });
      },
      //获取验证码
      smsClick:function () {
        if (this.ruleForm.mobile == ""){
          this.ruleForm.mobile == ""
          // this.$message.error('请输入手机号');
          return;
        }else{
          let data = {
            mobile:this.ruleForm.mobile,
            sms_key:'sms_auth'
          }
          sendSms(data).then((res)=>{
            if (res.code == 200){
              this.startTimer();
              this.$message({
                message: '验证码已发送',
                type: 'success'
              });
            }else {
              this.$message.error(res.msg);
            }
          })
        }
      },
      startTimer:function(){
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.disable = true;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              this.codeStr = this.count + "(s)"
            } else {
              this.codeStr = "重新发送"
              this.disable = false;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      },
      //取消更改
      console(){
        this.isUpdateMobile = false
        this.$emit('updateMobileData', this.isUpdateMobile)
      },
      //提交修改
      submit(){
        this.$refs.ruleForm.validate((valid) => {
          if(valid){
            let data = {
              mobile:this.ruleForm.mobile,
              valid_code:this.ruleForm.code,
            }
            updateMobile(data).then(res=>{
              if(res.code==200){
                this.$message.success('修改成功')
                this.isUpdateMobile = false
                this.$emit('updateMobileData', this.isUpdateMobile)
              }else{
                this.$message.error(res.msg)
              }
            })
          }
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/setting.scss";
</style>
<style>
  .el-dialog__header {
    border-bottom: 1px solid #E6E6E6;
  }
</style>
